<template>
	<scroll-page 
	:loading="loading" 
	:offset="offset" 
	:no-data="noData" 
	v-on:load="load">
	    <article-item 
		v-for="article in articles" 
		:key="article.id" 
		v-bind="article">
		
		</article-item>
		
	</scroll-page>
</template>

<script>
	import ArticleItem from '@/components/article/ArticleItem'
	import ScrollPage from '@/components/scrollpage'
	import { getArticles } from '@/api/article'
	import { Message } from 'element-ui';
	
	export default {
		name: "ArticleScrollPage",
		data() {
			return {
				loading : false,
				noData : false,
				offset : 0,
				articles:[],
				innerPage:{
					page: 1,
					pageSize: 10
				}
				
			}
		},
		created() {
			this.getArticles();
		},
		methods: {
			load() {
				//触发分页调用此方法
				
				this.getArticles();
			},
			getArticles(){
				this.loading = true;
				getArticles(this.innerPage).then((req)=>{
					//Result (success,msg,data)
					req.data.success
					if (req.data.success) {
						if (req.data.data.length <= 0) {
							this.noData = true;
						}
						this.articles = this.articles.concat(req.data.data);
						this.innerPage.page += 1;
					} else{
						this.$message.error(req.data.msg);
					}
				}).catch((err)=>{
					this.$message.error("系统错误");
				}).finally(()=>{
					this.loading = false;
				})
				this.noData = false;
				
			}
			
		},
		components: {
			"scroll-page": ScrollPage,
			"article-item" :ArticleItem
		},
	}
</script>

<style scoped>
	.el-card {
		border-radius: 0;
	}
	.el-card:not(:first-child){
		margin-top: 10px;
	}
</style>